<template>
	<view class="login-con">
		<nav-bar title=" " bgColor="transparent" :border="false"/>
		<image class="pageBg" :src="loginBg"/>
		<view class="form-con">
			<view class="login-top">
				<view class="sub-title">注册</view>
			</view>
			<view class="login-form margin-top">
				<u--form labelPosition="left" :model="formData" labelWidth="80">
					<u-form-item prop="xuehao" borderBottom label="学 号:">
						<u-input v-model="formData.xuehao" placeholder="请输入学号" border="none"></u-input>
					</u-form-item>
					<u-form-item prop="mima" borderBottom label="密 码:">
						<u-input v-model="formData.mima" placeholder="请输入密码" border="none" :password="showPassWord">
							<template #suffix>
									<u-icon :name="showPassWord?'eye-fill':'eye-off'" color="#999" @click="showPassWord=!showPassWord"/>
								</template>
						</u-input>
					</u-form-item>
					<u-form-item borderBottom label="确认密码:">
						<u-input v-model="formData.confirmPass" placeholder="请输入确认密码" border="none" :password="showConfirmPass">
							<template #suffix>
									<u-icon :name="showConfirmPass?'eye-fill':'eye-off'" color="#999" @click="showConfirmPass=!showConfirmPass"/>
								</template>
						</u-input>
					</u-form-item>
					<u-form-item>
						<u-button type="primary" text="注册" @click="onregister"></u-button>
					</u-form-item>
					<view class="" @click="$uniRouter.redirectTo({url:'/pages/login/login'})">登录</view>
				</u--form>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import { registerApi } from '@/common/api/user.js'
	import staticImgs from '@/common/utils/staticImg.js'
	export default {
		data() {
			return {
				loginBg:staticImgs.loginBg,
				formData: {
					xuehao: '', //登录账号
					mima: '', //密码
					confirmPass: '', //确认密码
				},
				showPassWord:true,//密码显示隐藏
				showConfirmPass:true,//确认密码显示隐藏
				rule: [{
						name: "xuehao",
						checkType: "notnull",
						errorMsg: "请输入账号"
					},
					{
						name: "mima",
						checkType: "notnull",
						errorMsg: "请输入密码"
					},
					{
						name: "confirmPass",
						checkType: "same",
						// checkRule:this.formData.mima,
						errorMsg: "请与密码保持一致"
					},
				],

			}
		},
		methods: {
			async onregister() {
				let that = this
				that.rule[2].checkRule = that.formData.mima
				var checkRes = that.$validateCheck.check(that.formData, that.rule)
				if (checkRes) {
					// console.log("验证通过")
					const res = await registerApi(that.formData)
					
					if(res){
						uni.showToast({
							title: '注册成功,去登陆',
							icon: "none"
						});
						setTimeout(()=>{
							that.$uniRouter.redirectTo({url:'/pages/login/login'})
						},2000)
					}
				}else {
					uni.showToast({
						title: that.$validateCheck.error,
						icon: "none"
					});
				}
				
			}
		}
	}
</script>



<style lang="scss" scoped>
	.form-con{
		position: relative;
		margin: $uni-margin-base;
		border-radius: 8rpx;
		box-shadow: 0 0rpx 6rpx rgba(0,0,0,.3);
		top: 100rpx;
		.login-top {
			text-align: center;
			padding: 80rpx 0 0;
		
			.sub-title {
				font-size: $uni-font-size-xl;
				font-weight: bold;
			}
		}
		.login-form {
			padding: $uni-margin-base;
			
			.other-login {
				display: flex;
				justify-content: space-around;
		
				.login-item {
					display: flex;
					flex-direction: column;
					align-items: center;
		
					/deep/.u-icon {
						.u-icon__icon {
							font-size: 2rem !important;
						}
					}
				}
			}
		}
	}


	
</style>